<!-- 点赞、评论等用户操作的集合。组件: <operate-bar :data="formData" @change="change"></operate-bar> -->
<template>
	<view class="op-ul">
		<view class="op-li" v-for="(item, index) in dataList" :key="index" @click="click(item.id)">
			<u-icon :name="item.icon" color="#333" size="48"/>
			<view class="">{{item.name}} {{data[item.value]}}</view>
		</view>
		<!-- <view class="op-li" @click="click">
			<u-icon name="thumb-up" color="#333" size="48"/>
			<view class="">点赞 {{num_zan}}</view>
		</view>
		<view class="op-li" @click="click">
			<u-icon name="thumb-down" color="#333" size="48"/>
			<view class="">反对 {{num_cai}}</view>
		</view>
		<view class="op-li" @click="click">
			<u-icon name="warning" color="#333" size="48"/>
			<view class="">举报 {{num_jubao}}</view>
		</view>
		<view class="op-li" @click="click">
			<u-icon name="star" color="#333" size="48"/>
			<view class="">收藏 {{num_shoucang}}</view>
		</view>
		<view class="op-li" @click="click">
			<u-icon name="chat" color="#333" size="48"/>
			<view class="">评论 {{num_pinglun}}</view>
		</view>
		<view class="op-li" @click="click">
			<u-icon name="share" color="#333" size="48"/>
			<view class="">分享 {{num_fenxiang}}</view>
		</view> -->
	</view>
</template>

<script>
	import OPERATE from "@/data/operate.js"
	
	export default {
		name:"operate-bar",
		props:{
			data: {
				type: Object,
				default(){
					return {}
				}
			},
			nav: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				dataList: [],
				// pv: 100, // 浏览量 page view
				// noc: 18, // 评论数量 Number of comments
				// num_zan: 0, // 赞数
				// num_cai: 0, // 踩数
				// num_jubao: 0, // 举报数
				// num_shoucang: 0, // 收藏数
				// num_dashang: 0, // 打赏数
				// num_pinglun: 0, // 评论数
				// num_fenxiang: 2, // 分享数
			};
		},
		mounted(){
			this.init();
		},
		methods: {
			init(){
				// 根据传入的nav，决定显示哪些互动功能
				let ids = '1234567'; // 互动功能的id集合
				
				if(this.nav == 'product'){
					ids = '123467'
				}else if(this.nav == 'purchase'){
					ids = '123467'
				}else if(this.nav == 'news'){
					ids = '1234567'
				}else if(this.nav == 'price'){
					ids = '12347'
				}else if(this.nav == 'expo'){
					ids = '1234567'
				}else if(this.nav == 'video'){
					ids = '1234567'
				}else if(this.nav == 'join'){
					ids = '123467'
				}else if(this.nav == 'brand'){
					ids = '123467'
				}else if(this.nav == 'card'){
					ids = '897'
				}
				
				this.dataList = OPERATE.filter(item => ids.indexOf(item.id) >= 0).sort((a,b) => a.sort-b.sort)
			},
			click(id){
				let obj = this.dataList.find(item => item.id == id);
				vk.toast('点击了' + obj.name)
			}
		}
	}
</script>

<style scoped>
.op-ul{
	margin: 20rpx 0;
	padding: 40rpx 20rpx;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
.op-li{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
</style>